<template>
  <div class="v-uploader" :class="{'hidden-files': !showFiles,'hidden-uploader': !showUploader}">
    <a-card :title="uploaderTitle">
      <div class="actions" slot="extra">
        <a class="muted action-item" @click="showFiles = !showFiles">
          <a-icon type="shrink" v-show="showFiles" />
          <a-icon type="arrows-alt" v-show="!showFiles" />
        </a>
        <a class="muted action-item" @click="closeUploader">
          <a-icon type="close" />
        </a>
      </div>
      <uploader ref="uploader" :options="options" :autoStart="autoStart" @files-submitted="filesSubmitted"
        @file-progress="fileProgress" @file-success="fileSuccess" @file-error="fileError" @file-complete="fileComplete"
        @complete="complete" class="uploader-workplace">
        <vue-scroll>
          <!--<a-button @click="testSomeThing">测试</a-button>-->
          <!--<uploader-unsupport></uploader-unsupport>-->
          <!--<uploader-btn>select files</uploader-btn>-->
          <!--<uploader-drop>
                        <p>Drop files here to upload or</p>
                        <uploader-btn>select files</uploader-btn>
                        <uploader-btn :attrs="attrs">select images</uploader-btn>
                        <uploader-btn :directory="true">select folder</uploader-btn>
                    </uploader-drop>-->
          <uploader-list>
            <template slot-scope="files">
              <ul class="uploader-wrapper">
                <uploader-file :key="file.id" :file="file" :list="true" v-for="file in files.fileList">
                  <template slot-scope="file">
                    <li class="uploader-item">
                      <div class="item-content">
                        <div class="item-info">
                          <div class="file-item">
                            <div class="file-icon">
                              <a-avatar icon="link" shape="square" :src="file.file.fileUrl" />
                            </div>
                            <div class="file-info">
                              <div class="file-content">
                                <div class="file-title">
                                  <a-tooltip placement="top" :mouseEnterDelay="0.3" :title="file.file.name">
                                    {{file.file.name}}
                                  </a-tooltip>
                                </div>
                                <div class="file-extra">
                                  <span>{{file.file.projectName ? file.file.projectName : tempData.projectName}}</span>
                                  <span v-if="file.status == 'success'">({{file.formatedSize }})</span>
                                  <span
                                    v-else>({{(Number(file.uploadedSize) / (1024 * 1000)).toFixed(2) }}MB/{{file.formatedSize }})</span>
                                </div>
                              </div>
                              <div class="uploader-progress" v-show="file.status != 'success'">
                                <a-progress :strokeWidth="2" :showInfo="false" :percent="file.progress * 100" />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="item-status">
                          <a class="muted" @click="cancelUpload(file)">
                            <a-icon type="close" v-show="file.status != 'success'" />
                          </a>
                          <a-icon class="text-success" type="check" v-show="file.status == 'success'" />
                        </div>
                      </div>
                    </li>
                  </template>
                </uploader-file>
              </ul>
            </template>
          </uploader-list>
          <!--<uploader-files>
                    </uploader-files>-->
        </vue-scroll>
      </uploader>
    </a-card>
  </div>
</template>

<script>
  import {
    checkResponse,
    getApiUrl
  } from "@/assets/tw/js/utils";
  import {
    mapState
  } from 'vuex'
  import {
    getStore
  } from "@/assets/tw/js/storage";
  import {
    notice
  } from "@/assets/tw/js/notice";
  import Vue from 'vue'
  import {
    ACCESS_TOKEN
  } from "@/store/mutation-types"
  import {
    uploadFiles
  } from "@/api/teamwork/file";

  export default {
    name: "v-uploader",
    props: {
      id: {
        type: [String],
        default () {
          return ''
        }
      },
    },
    data() {
      return {
        loading: false,
        showFiles: false, //显示上传文件
        showUploader: false, //显示上传窗口
        progressTotal: 0, //上传中的文件数
        completeTotal: 0, //已完成的文件数
        options: {
          target: uploadFiles,
          testChunks: false,
          query: function() {
            return getStore('tempData', true); //query暂时无法动态响应
          },
          headers: {
            "X-Access-Token": Vue.ls.get(ACCESS_TOKEN)
          },
        },
        attrs: {
          accept: 'image/*'
        },
        autoStart: true,
      }
    },
    computed: {
      ...mapState({
        uploader: state => state.tw.uploader,
        tempData: state => state.tw.tempData,
      }),
      uploaderTitle() {
        if (!this.progressTotal) {
          return '上传完成';
        }
        let current = this.completeTotal + 1;
        if (current > this.progressTotal) {
          current = this.progressTotal;
        }
        return `正在上传 ${current}/${this.progressTotal}`;
      }
    },
    watch: {
      id() {
        this.init();
      },
    },
    created() {
      this.init();
    },
    mounted() {
      this.$nextTick(() => {
        window.uploader = this.$refs.uploader.uploader;
        this.$store.dispatch('setUploader', window.uploader);
        console.log(window.uploader);
      })
    },
    methods: {
      init() {

      },
      closeUploader() { //关闭上传窗口
        this.showUploader = false;
        this.uploader.cancel();
      },
      filesSubmitted(files) { //添加上传文件
        // this.$refs.uploader.uploader.opts.query = this.tempData;
        this.showUploader = true;
        this.showFiles = true;
        this.progressTotal += files.length;
        console.log('file submitted', files)

      },
      fileProgress(rootFile, file, chunk) { //有文件上传中
        this.showUploader = true;
        this.showFiles = true;
        console.log('file progress', arguments)
      },
      fileSuccess(rootFile, file, message, chunk) { //一个文件上传成功
        const response = JSON.parse(message);
        if (!checkResponse(response)) {
          notice({
            title: response.msg
          }, 'notice', 'error');
          return false;
        }
        rootFile.projectName = response.result.projectName;
        rootFile.fileUrl = response.result.url;
        console.log('file success', rootFile);
        this.completeTotal++;
      },
      fileError(rootFile, file, message, chunk) { //一个文件上传失败                this.progressTotal--;
        this.completeTotal--;
        const response = JSON.parse(message);
        file.cancel();
        rootFile.projectName = response.result.projectName;
        console.log('file error', rootFile);
        notice({
          title: response.msg
        }, 'notice', 'error');
      },
      fileComplete(rootFile) { //一个文件上传完成
        console.log('file complete', rootFile);
      },
      complete() { //所有文件上传完成
        console.log('complete', arguments);
        this.progressTotal = this.completeTotal = 0;
        notice({
          title: '关联文件成功'
        }, 'notice', 'success');
        setTimeout(() => {
          this.showFiles = false;
        }, 3000);
      },
      cancelUpload(file) {
        console.log(file);
        this.progressTotal--;
        this.completeTotal--;
        file.file.cancel();
      },
      filterList(list) {
        return list;
        return list.reverse();
      },
      testSomeThing() {
        console.log(this.uploader.fileList);
        this.uploader.fileList[0].resume();
      },
    }
  }
</script>

<style lang="less">
  @import "~ant-design-vue/lib/style/themes/default";

  .v-uploader {
    position: fixed;
    bottom: 12px;
    right: 24px;
    width: 485px;
    z-index: 1001;
    box-shadow: 0 7px 21px rgba(0, 0, 0, .1);
    transition: bottom 218ms ease;

    .ant-card {
      box-shadow: 0 7px 21px rgba(0, 0, 0, .1);

      .ant-card-head {
        margin-bottom: 0;
        border-bottom: 1px solid #e1e1e1;
      }

      .ant-card-head-title,
      .ant-card-extra {
        padding: 12px 0;
      }

      .ant-card-body {
        padding: 0;
      }
    }

    &.hidden-files {
      bottom: -241px;
    }

    &.hidden-uploader {
      bottom: -291px;
    }

    .actions {
      .action-item {
        margin-left: 12px;
        font-size: 16px;
      }
    }

    .uploader-workplace {
      height: 240px;
      background-color: #f7f7f7;
      padding: 12px 0 0 12px;

      .uploader-list {
        padding-right: 12px;

        .uploader-wrapper {
          .uploader-file {
            padding: 0;
            height: auto;
            line-height: 36px;
            border-bottom: none;
            border-radius: 4px;

            .uploader-item {
              width: 100%;
              margin-bottom: 8px;
              background: #eee;

              .item-content {
                padding: 6px 12px;
                display: flex;
                justify-content: space-between;
                flex: 1;

                .item-info {
                  flex: 1 1 auto;
                  position: relative;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;

                  .file-item {
                    display: flex;

                    .file-icon {
                      margin-right: 8px;
                    }

                    .file-info {
                      width: 100%;
                      min-width: 0;
                      padding: 4px 0;
                      line-height: 16px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;

                      .file-content {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .file-title {
                          max-width: 210px;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          min-width: 0;
                        }

                        .file-extra {
                          display: flex;
                          align-items: center;
                          max-width: 200px;
                          margin-left: 16px;
                          color: gray;
                          font-size: 12px;

                          span {
                            margin-left: 3px;
                          }
                        }
                      }
                    }

                    .uploader-progress {
                      .ant-progress-outer {
                        margin: 0;
                      }
                    }
                  }
                }

                .item-status {
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  width: 30px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>